<template>
  <view class="start">
    <!-- 自定义导航栏 -->
    <!-- <view class="custom-navbar">
      <view class="icon"></view>
      <view class="navbar-title">开直播</view>
    </view> -->
    <view class="live-card" @click="goToLiveSetting">
      <image class="live-card-img" :src="liveInfo.cover || '/static/img.png'" mode="aspectFill" />
      <text class="live-title">{{ liveInfo.title || "准备直播" }}</text>
      <view class="card-icon"></view>
    </view>
    <view class="live-actions-container">
      <!-- 操作栏 -->
      <!-- <view class="live-actions">
        <view class="live-action-item" @click="switchCamera">
          <image class="action-icon action-icon-1" />
          <text class="action-text">翻转</text>
        </view>
        <view class="live-action-item" @click="showShareModal">
          <image class="action-icon action-icon-2" />
          <text class="action-text">分享</text>
        </view>
        <view class="live-action-item" @click="enableBeauty">
          <image class="action-icon action-icon-3" />
          <text class="action-text">美颜</text>
        </view>
        <view class="live-action-item" @click="goToProducts">
          <image class="action-icon action-icon-4" />
          <text class="action-text">商品</text>
        </view>
      </view> -->
      <!-- 开始直播按钮 -->
      <button class="start-live-btn" @click="startLive">
        <text class="icon"></text>
        开始视频直播
      </button>
    </view>
    <!-- 分享弹窗 -->
    <!-- <view class="share-modal" v-if="showShare" @click="hideShareModal">
      <view class="share-content share-image-style">
        <view class="share-header-row">
          <text class="share-title">分享直播间</text>
          <button class="copy-btn-image" @click="copyLink">复制链接</button>
        </view>
        <view class="share-link-image-box">
          <text class="share-link-image">{{ shareLink }}</text>
          <text class="share-link-desc">点击链接直接打开 或者复制文案打开京东</text>
        </view>
        <button class="cancel-btn-image" @click="hideShareModal">取消</button>
      </view>
    </view> -->
  </view>
</template>
<script>
import { get } from '@/utils/request';
export default {
  data() {
    return {
      userInfo: {},
      liveInfo: [],
      // 响应式数据
      // showShare: false,
      // shareLink: "https://live.example.com/room/123456",
    };
  },
  onLoad(options) {
    console.log(options, "options");
    this.userInfo = JSON.parse(decodeURIComponent(options.userInfo));
    console.log(this.userInfo, "userInfo");
  },
  mounted() {

    // 获取直播间信息
    get("/api/live/getLiveInfo").then(res => {
      console.log(res.data, "res-start");
      this.liveInfo = res.data;
    })
  },
  destroyed() {
  },
  methods: {
    goToLiveSetting() {
      uni.navigateTo({
        url: "/pages/livesetting/livesetting?liveInfo=" + encodeURIComponent(JSON.stringify(this.liveInfo)),
      });
    },
    // 显示分享弹窗
    // showShareModal() {
    //   this.showShare = true;
    // },
    // 隐藏分享弹窗
    // hideShareModal() {
    //   this.showShare = false;
    // },
    // 复制分享链接
    // copyLink() {
    //   uni.setClipboardData({
    //     data: this.shareLink,
    //     success: () => {
    //       uni.showToast({
    //         title: "链接已复制",
    //         icon: "success",
    //       });
    //     },
    //     fail: () => {
    //       uni.showToast({
    //         title: "复制失败",
    //         icon: "error",
    //       });
    //     },
    //   });
    // },
    // 跳转到商品页面
    // goToProducts() {
    //   uni.navigateTo({
    //     url: "/pages/products/products",
    //   });
    // },
    // 开始直播
    startLive() {


      console.log("开始直播");
      uni.navigateTo({
        url: "/pages/camera/camera?userInfo=" + encodeURIComponent(JSON.stringify(this.userInfo)),
      });
    },
  },
};
</script>
<style>
.start {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0;
  background-color: #323232;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* 自定义导航栏样式 */
/* .custom-navbar {
  width: 100%;
  height: 44px;
  background-color: #323232;
  border: 1px solid chocolate;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: var(--status-bar-height);
}
.icon {
  background-image: url(../../static/icon.png);
  background-size: inherit;
  background-position: center;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 8px;
}
.navbar-title {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #ffffff;
} */
.live-card {
  width: 350px;
  height: 78px;
  margin-top: 34px;
  background: #69696966;
  display: flex;
  align-items: center;
  padding: 0 0 0 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.live-card:active {
  transform: scale(0.98);
  background: #69696988;
}

.live-card-img {
  width: 116px;
  height: 65px;
  border-radius: 10rpx;
  margin-right: 20px;
}

.live-title {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #ffffff;
}

.card-icon {
  width: 17px;
  height: 17px;
  background-image: url(../../static/Frame.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 8px;
}

.live-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.live-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 10px;
}

.live-action-item:active {
  transform: scale(0.9);
}

.action-icon {
  width: 28px;
  height: 28px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 4px;
}

.action-icon-1 {
  background-image: url(../../static/active-1.png);
}

.action-icon-2 {
  background-image: url(../../static/active-2.png);
}

.action-icon-3 {
  background-image: url(../../static/active-3.png);
}

.action-icon-4 {
  background-image: url(../../static/active-4.png);
}

.action-text {
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #ffffff;
}

.start-live-btn {
  width: 274px;
  height: 48px;
  background: linear-gradient(101.01deg, #fe511f 5.29%, #fd8139 97.57%);
  color: #fff;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* line-height: 48px; */
  border: none;
  font-size: 16px;
  /* cursor: pointer;  */
  margin: 35px 0px;
  transition: all 0.3s ease;
}

.start-live-btn:active {
  transform: scale(0.98);
  background: linear-gradient(101.01deg, #e04a1c 5.29%, #e6732f 97.57%);
}

/* 分享弹窗图片风格样式 */
.share-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 9999;
}

.share-image-style {
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 32px rgba(0, 0, 0, 0.12);
  background: #fff;
  padding: 24px 18px 18px 18px;
  width: 100vw;
  max-width: 430px;
  margin-bottom: env(safe-area-inset-bottom, 0);
  /* 适配iPhone X底部 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.share-header-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.copy-btn-image {
  background: #fe511f;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(254, 81, 31, 0.08);
  line-height: 1;
}

.copy-btn-image:active {
  background: #fd8139;
}

.share-link-image-box {
  width: 100%;
  background: #fff;
  border: 1px solid #fe511f;
  border-radius: 12px;
  padding: 14px 12px 10px 12px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.share-link-image {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 6px;
  word-break: break-all;
  text-align: left;
}

.share-link-desc {
  color: #bbb;
  font-size: 12px;
  text-align: left;
}

.cancel-btn-image {
  margin-top: 8px;
  width: 100%;
  background: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 12px;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.cancel-btn-image:active {
  background: #ececec;
}
</style>